<template>
  <div class="bigBox">
    <div class="box">
      <div class="header">
        <div class="header1">通用设置</div>
      </div>
      <div class="content">
        <div class="row1">
          <span>待付款订单取消时间：拍下未付款订单</span>
          <el-input
            v-model="tableData.period"
            style="width: 44px; margin-left: 17px; margin-right: 17px"
          />
          <span>分钟内未付款，自动取消订单</span>
        </div>
        <div class="row2">
          <span>累计消费满</span>
          <el-input
            v-model="tableData.consume"
            style="width: 116px; margin-left: 17px; margin-right: 17px"
          />
          <span>元，升一级；最高</span>
          <el-input
            v-model="tableData.maxLevel"
            style="width: 44px; margin-left: 17px; margin-right: 17px"
          />
          <span>级</span>
        </div>
        <div class="row3">
          <span>每</span>
          <el-input
            v-model="tableData.integral"
            style="width: 75px; margin-left: 17px; margin-right: 17px"
          />
          <span>几分可抵扣</span>
          <el-input
            v-model="tableData.money"
            style="width: 44px; margin-left: 17px; margin-right: 17px"
          />
          <span>元</span>
        </div>
        <div>
          <el-button type="primary" @click="toSave" class="saveBtn">
            <img
              style="width: 16px; height: 16px"
              src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E6%96%B0%E5%A2%9E%E8%BD%AE%E6%92%AD%E5%9B%BE/u710.png"
            />
            <span style="margin-left: 5px">保存</span>
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { routerKey, useRouter } from 'vue-router'
import axios from '../utils/http'
import { onMounted, reactive, ref } from 'vue'
import { Delete, Download, Plus, ZoomIn, Coin } from '@element-plus/icons-vue'

import { ElButton, ElForm, ElFormItem, ElInput, ElMessage } from 'element-plus'
let tableData = ref({
  period: '',
  consume: '',
  maxLevel: '',
  integral: '',
  money: '',
})
//获取数据
const getData = function () {
  axios({
    url: '/setup/common',
    method: 'get',
  }).then(({ data }) => {
    console.log(data)
    if (data.code == 0) {
      tableData.value = data.data
    }
  })
}
//保存修改后
const toSave = function () {
  console.log(tableData.value)
  axios({
    url: '/setup/commonEdit',
    method: 'put',
    params: tableData.value,
  }).then(({ data }) => {
    console.log(data)
    if (data.code == 0) {
      getData()
      ElMessage({
        message: '保存成功',
        type: 'success',
      })
    }
  })
}
//挂载后
onMounted(() => {
  getData()
})
</script>

<style lang="less" scoped>
@import url('../assets/J-iconfont/iconfont.css');
* {
  margin: 0;
  padding: 0;
}
.bigBox {
  display: flex;
  justify-content: center;
  background-color: #fcfcfc;
  .box {
    width: 1100px;
    margin: 0 127px;
    // border: 1px solid aqua;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    .header {
      margin-top: 25px;
      margin-bottom: 25px;
      width: 1100px;
      display: flex;
      justify-content: space-between;
      .header1 {
        font-size: 24px;
        color: #9037f3;
        font-weight: 700;
      }
    }
    .content {
      width: 499px;
      background-color: #ffffff;
      border: 1px solid #e4e4e4;
      padding: 62px 548px 47px 53px;
    }
  }
}
.row1,
.row2,
.row3 {
  text-align: center;
  display: flex;
  margin-bottom: 23px;
  line-height: 37px;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
}
</style>
<style>
.saveBtn {
  width: 98px;
  height: 36px;
  color: #ffffff;
  background-color: #9037f3;
  border: none;
  margin-top: 145px;
  margin-left: 450px;
}
</style>
